<template>
  <div class="hello">
      <h1>v-html和v-text的探索</h1>
      <h1 >{{count}}</h1>
      <router-link to = '/demo3'><h1>demo3</h1></router-link>
      <router-link to = '/demo4'><h1>demo4 {{this.$store.state.city}}</h1></router-link>
      <router-link v-jspang="{color:'blue'}" to="/demo1"><h1>调到demo1界面</h1></router-link>
      <span v-html="msgHtml"></span>
      <h2 v-if="1==1 ? true:false">v-if</h2>
      <h2 v-show = "1==2 ? true:false">v-show</h2>
      <ul>
         <li class="oli" v-for = " item in sortNumber">{{item}}</li>
      </ul>
      <ul>
        <li class="oli" v-for="(student,index) in sortStudent">
          {{index}}：{{student.name}} - {{student.age}}
        </li>
      </ul>
      <input type="text" name="" v-on:keyup.enter="addCount">
      <div :class="classNameA">1.绑定样式A</div>
      <div :class="[classB,classC]">3、绑定class中的数组</div>
      <div :class="{classD:isOk}">2、绑定class中的判断</div>
      <div :class="isTrue?classE:classF">4、绑定class的三元运算</div>
      <div :style="{color:activeColor,fontSize:fontSize+'px'}">5.绑定style</div>
      <div :style="styleObject">6、绑定样式对象</div>
      <div v-pre>{{ vpre }}</div>
      <div v-cloak>{{ cloak }}</div>
      <div v-once>{{vonce}}</div>
    
      <div>{{outdata.count}}</div>
      <button @click = "add">点击操作外部数据</button>
      <button @click = "addOut">点击直接改变外部数据</button>
      <router-link to = '/demo3'><h1>demo3</h1></router-link>
      <router-link v-jspang="{color:'blue'}" to="/demo1"><h1>调到demo1界面</h1></router-link>
  </div>
</template>

<script>
  import Vue from 'vue'
  
  var outData={
    count:1,
    goodName:'car'
};
export default {
  name: 'HelloWorld',
  data () {
    return {
      outdata:outData,
      vonce:'只渲染一次',
      cloak:'v-cloak',
      vpre:'999666',
      styleObject:{
        fontSize:'26px',
        color:'#999',
        fontWeight:900
      },
      activeColor:"blue",
      fontSize:28,
      isTrue:false,
      isOk:true,
      classNameA:"classA",
      classB:"classB",
      classC:"classC",
      classF:'classF',
      mesg:'v-text',
      msg: 'Welcome to Your Vue.js App',
      visible:true,
      msgHtml:"<h2>v-html渲染出来的</h2>",
      items:[66,45,56,23,11,78,99,88],
      students:[
        {name:'jspang',age:32},
        {name:'Panda',age:30},
        {name:'PanPaN',age:21},
        {name:'King',age:45}
      ]
    }
  },
 beforeRouteEnter(to, from, next) {
     next(vm => {
      /*
      如果 to.meta.savedPosition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据
      如果savedPosition === null, 那么说明是点击了导航链接;
      此时需要刷新数据，获取新的列表内容。
      否则的话 什么都不做，直接使用 keep-alive中的缓存
      */
      
      if (to.meta.savedPosition === null || to.meta.savedPosition === undefined) {
        console.log("to.meta.savedPosition")
         console.log(to.meta.savedPosition)
         console.log("to.meta.savedPosition")
      }else{
         console.log("to.meta.savedPosition------------------")
         console.log(to.meta.savedPosition)
         console.log("to.meta.savedPosition---------------------")
      }

     })
    },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from , next) {
   //用户未保存操作即要离开页面 警示用户
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
},
  computed:{
    count(){
      return this.$store.state.count
    },
    sortNumber(){
      return this.items.sort(this.sortNum)
    },
    sortStudent:function(){
     return this.sortByKey(this.students,'age');
    }
  },
 created(){
    console.log(this.$store.state.count)
  },
  mounted(){
  console.log(this.items)
  var authorExtend = Vue.extend({
           template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
           data:function(){
               return{
                   authorName:'JSPang',
                   authorUrl:'http://www.jspang.com'
               }
           }
       });
       new authorExtend().$mount('author');
  },
  methods:{
        sortNum(a,b){
           return a-b ;
        },
        sortByKey(array,key){
          return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
         });
      },
      addCount(){
         alert('键盘回车键')
      },
      add(){
        Vue.set(outData,'count',4);
    },
    addOut(){
       this.outdata.count++ 
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
[v-cloak]{
  display: none;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
ul .oli{
 display: block;
}
.classA{
  color: blue;
  font-size:30px;
}
.classB{
  color:red;
}
.classC{
  font-size: 28px;
}
.classD{
  color: #f0f;
}
.classF{
  color: yellow;
}
</style>
